<template>
  <div class="parent-container">
    <h1>父组件</h1>

    <!-- 显示当前点击的内容 -->
    <div class="clicked-content">点击的内容：{{ zcf }}</div>

    <!-- 添加内容表单 -->
    <form @submit.prevent>
      <input type="text" placeholder="输入新内容" v-model="texts" />
      <button type="submit" @click="addinfo">添加内容</button>
    </form>

    <p v-if="infoarr.length === 0">列表为空</p>

    <!-- 子组件 -->
    <div v-else>
      <ContentList v-for="item in infoarr" :key="item.id" :item="item" @chuanzi="chuanzhifz">
        <!-- 插槽，显示额外的提示信息 -->
        <template #default>
          <p>
            {{ item.text }}
            <a href="javascript:;" @click="edl(item.id)">删除</a>
          </p>
        </template>
      </ContentList>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ContentList from './SonsonDemo/ContentList.vue'

interface InFonm {
  id: number
  text: string
}
const texts = ref('')

const infoarr = ref<InFonm[]>([])

const addinfo = () => {
  if (texts.value.trim()) {
    infoarr.value.push({
      id: infoarr.value.length + 1,
      text: texts.value.trim()
    })
    texts.value = ''
  }
}

const edl = (id: number) => {
  infoarr.value = infoarr.value.filter((item) => item.id !== id)
}
const zcf = ref('')

const chuanzhifz = (value: string) => {
  zcf.value = value
}
</script>

<style lang="scss" scoped>
.parent-container {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.clicked-content {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px dashed #888;
}

form {
  margin-top: 20px;
}

form input {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 120px);
  margin-right: 10px;
}

form button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form button:hover {
  background-color: #218838;
}

.content-list {
  margin-top: 20px;
}

.content-item {
  padding: 8px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.content-item:hover {
  background-color: #f1f1f1;
}

.empty-list {
  color: #888;
  font-style: italic;
}

.title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
}
</style>
